<template>
  <view class="main">
    <uni-nav-bar title="登录" fixed :border="false" height="88rpx" statusBar></uni-nav-bar>
    <view class="loginBox">
      <view class="img">
        <image src="../../static/login/minilogo.png" mode="aspectFit" class="minilogo"></image>
      </view>
      <uni-forms class="login-form" ref="form" :model="formData" :rules="rules">
        <uni-forms-item name="userName">
          <input v-model="formData.userName" placeholder="账号" class="uni-input-input"
            placeholder-style="color: #818181" />
        </uni-forms-item>
        <uni-forms-item name="password">
          <input v-model="formData.password" type="password" placeholder="密码" class="uni-input-input"
            placeholder-style="color: #818181" />
        </uni-forms-item>
        <button class="submit-button" @click.stop="submit">
          登录
        </button>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { getToken } from '@/utils/auth'
import md5 from 'md5'
export default {
  name: 'Login',
  data() {
    return {
      formData: {
        userName: '',
        password: ''
      },
      timer: '',
      times: '获取验证码',
      getcodestatus: true,
      rules: {
        userName: {
          rules: [
            {
              required: true,
              errorMessage: '请输入账号'
            },
            // {
            //   validateFunction: function (rule, value, data, callback) {
            //     let iphoneReg =
            //       /^1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/ //手机号码
            //     if (!iphoneReg.test(value)) {
            //       callback('账号为手机号格式，请重新填写')
            //     }
            //   }
            // }
          ]
        },
        password: {
          rules: [
            {
              required: true,
              errorMessage: '请输入密码'
            }
          ]
        }
      },
      storeId: ''
    }
  },
  onLoad() {
    if (getToken()) {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  },
  methods: {
    // async getCode() {
    //   if (this.getcodestatus) {
    //     const reg =
    //       /^1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
    //     if (reg.test(this.formData.phone)) {
    //       const res = await getCode({ phone: this.formData.phone })
    //       console.log('验证码信息：', res)
    //       if (res.code === 200) {
    //         uni.utils.toast('验证码已发送')
    //         let time = 60
    //         this.timer = setInterval(() => {
    //           time = time - 1
    //           console.log(time)
    //           this.getcodestatus = false
    //           this.times = time + 's'
    //           if (time < 1) {
    //             clearInterval(this.timer)
    //             this.times = '重新获取'
    //             this.getcodestatus = true
    //           }
    //         }, 1000)
    //       } else {
    //         uni.utils.toast(res.data.message)
    //       }
    //     } else {
    //       uni.utils.toast('请输入正确的手机号')
    //     }
    //   }
    // },
    // 触发提交表单
    submit() {
      this.$refs.form
        .validate()
        .then(async (res) => {
          console.log('表单数据信息：', res)
          this.$store.dispatch('user/userLogin', { userName: this.formData.userName, password: md5(this.formData.password) }).then((res) => {
            console.log('登录成功')
            uni.switchTab({
              url: '/pages/index/index'
            })
          })
        })
        .catch((err) => {
          console.log('失败')
          console.log('表单错误信息：', err)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.loginBox {
  padding: 40rpx;

  .img {
    text-align: center;
    margin-bottom: 40rpx;
  }
}

.uni-forms-item {
  height: 100rpx;
  margin-bottom: 20 !important;
  border-bottom: 2rpx solid #999999;
  box-sizing: border-box;
}

::v-deep .uni-forms-item__content {
  display: flex;
  align-items: center;
}

::v-deep input {
  width: 100%;
  font-size: $uni-font-size-base;
  color: $uni-main-color;
}

::v-deep .uni-forms-item__error {
  width: 100%;
  padding-top: 10rpx;
  border-top: 2rpx solid $uni-primary;
  color: $uni-primary;
  font-size: $uni-font-size-small;
  transition: none;
}

.text-button {
  width: 300rpx;
  padding-left: 10rpx;
  text-align: center;
  font-size: $uni-font-size-small;
  // color: $uni-main-color;
  color: #0180FF;
  border-left: 2rpx solid #eee;
}

.submit-button {
  width: 670rpx;
  height: 108rpx;
  line-height: 100rpx;
  /* #ifdef APP */
  padding-top: 4rpx;
  /* #endif */
  margin-top: 80rpx;
  border: none;
  color: #fff;
  background: linear-gradient(90deg, #05D4FD 0%, #2976FF 100%);
  border-radius: 54rpx;
  font-size: 48rpx;
}

button[disabled] {
  background-color: #fadcd9;
  color: #fff;
}

.minilogo {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
}
</style>
